<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
			:field="field" :orderby="orderby">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true"
						@click="handleItemClick(item.article_id[0]._id)">
						<template v-slot:body>
							<text>
								<!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
								<!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
								{{item.article_id[0].title}}
							</text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				collectionList: [
					db.collection('like').where('user_id==$cloudEnv_uid').getTemp(),
					db.collection('article').getTemp(),
				],
				where: 'user_id==$cloudEnv_uid',
				orderby: "publish_date desc",
				field: '',
				// field: 'user_id,title,content,desc,city,province,article_status,like_count,comment_count,last_comment_user_id,thumb,publish_date,last_modify_date',
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			handleItemClick(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?_id=' + id
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.uni-list {
		background-color: #f3f3f3;
		padding: 0 20rpx;
	}

	.uni-list-item {
		margin: 8rpx 0;
		border-radius: 10rpx;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.22);

		uni-text {
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			/* 这里是超出几行省略 */
			overflow: hidden;
		}


	}

	.uni-list-item:nth-of-type(2) {
		margin-top: 16rpx;
	}
</style>